<template>
  <div>
    <el-button class="margin-right" type="text" size="small" icon="el-icon-refresh" @click="refreshClassloaders"/>
    <el-select
             v-model="choseValue"
             placeholder="选择或创建一个类加载器"
             size="small"
             clearable
             default-first-option
             allow-create
             filterable
             style="width: 300px"
    >
      <el-option v-for="cl in classloaders" :key="cl" :label="cl" :value="cl" />
    </el-select>
  </div>
</template>

<script>
import core from '@/api/core'

export default {
  name: 'ClassloaderChose',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: String
  },
  data(){
    return {
      classloaders: [],
      choseValue: null
    }
  },
  methods: {
    refreshClassloaders(){
      core.classloaders().then(res => {
        this.classloaders = res.data

        if (this.classloaders && this.classloaders.length > 0 && !this.choseValue){
          this.$emit('change',this.classloaders[0])
        }
      })
    }
  },
  mounted() {
    this.refreshClassloaders()
  },
  watch: {
    choseValue: {
      handler(value){
        this.$emit('change',value)
      }
    },
    value: {
      handler(value){
        this.choseValue = value
      }
    }
  }
}
</script>

<style scoped>

</style>
